<style>
    #barra_content input:hover{
        filter: drop-shadow(7px 7px 4px gray);
        border: 1px solid black;
    }
</style>
<script>
    function toogleVisibility(){
    	if(document.getElementById("barra_content").style.display == "none"){
        	document.getElementById("td_barra").style.width="50px";
        	document.getElementById("barra_content").style.display = "block";
        	document.getElementById("toogleVisibilityButton").innerHTML = "-";
    	}else{
        	document.getElementById("td_barra").style.width="10px";
        	document.getElementById("barra_content").style.display = "none";
        	document.getElementById("toogleVisibilityButton").innerHTML = "+";
    	}
    }
    function exportarKml(){
    	window.app.exportKmlBF();
    }
    function isOSM(){
        return mapImpl == "OSM";
    }
    
    var firstIcon = '';
    var previousIcon = '';
    
</script>

   <div id="barra_lateral" style="height:100%;width:100%;">
   		<a href="#" onclick="toogleVisibility();" id="toogleVisibilityButton">-</a>
   		<div id="barra_content" style="width:100%; border:0px;">
   	 		<div style="width:100px; font-size:80%; min-height:20px">{{toolbar.MappedItensCount}}:</div><div style="width:100px; font-size:80%; min-height:20px" id="resultsinfo" style="width:100px"></div>
   	 		<div style="background-color:#666666; color:white; border:1px solid #000000;">{{toolbar.Selection}}:</div>
   	 		<input type='image' style='width:32; height:32' title="{{toolbar.Area}}" onclick="if(isOSM()) map.activateAreaDrag(); else map.dragSelect.activateAreaDrag();" src=''/>
            <input type='image' style='width:32; height:32' title="{{toolbar.Radius}}" onclick="if(isOSM()) map.activateRadiusDrag(); else map.dragSelect.activateRadiusDrag();" src=''/>
   	 		<div style="background-color:#666666; color:white; border:1px solid #000000;">{{toolbar.Sorting}}:</div>
   	 		<div style="width:100px; font-size:80%; min-height:20px" id="ordem_descr"></div>
   	 		<div style="background-color:#666666; color:white; border:1px solid #000000;">{{toolbar.Navigation}}:</div>
            <input type='image' style='width:20; height:20' title="{{toolbar.First}}" id='btnFirst'  onclick="moveToFirstMarker();"/>
            <input type='image' style='width:20; height:20' title="{{toolbar.Previous}}" id='btnPrevious' onclick="moveToPreviousMarker();"/>
            <input type='image' style='width:20; height:20; transform:scaleX(-1)' title="{{toolbar.Next}}" id='btnNext' onclick="moveToNextMarker();"/>
            <input type='image' style='width:20; height:20; transform:scaleX(-1)'  title="{{toolbar.Last}}" id='btnLast' onclick="moveToLastMarker();"/>
            <div style="background-color:#666666; color:white; border:1px solid #000000;">Zoom:</div>
            <input type='image' style='width:32; height:32' title="{{toolbar.DisplayAll}}" onclick="zoomOut();" src=''/>
            <div style="background-color:#666666; color:white; border:1px solid #000000;">Analysis:</div>
            <input type='image' style='width:32; height:32' title="Show as track" onclick="track.tooglePaths();" src=''/>
            <!-- 
            <input type='image' style='width:32; height:32' title="Grouping" onclick="track.tooglePaths();" src=''/>
            -->             
   	 		<br/><br/>
            <div style="background-color:#666666; color:white; border:1px solid #000000;">Data:</div>
            <input type='image' style='width:32; height:32' title="{{toolbar.ExportKML}}" onclick="exportarKml();" src=''/>
            <input type='image' style='width:32; height:32' title="{{toolbar.ChangeTileServer}}" onclick="window.app.getMap().fireChangeTileServer();" src=''/>

			<div style="position:absolute; bottom:20px; border:1px;" id="distancia_calc"></div>
		</div>
   </div>
<script>
     document.getElementById('btnFirst').src=firstIcon;
     document.getElementById('btnPrevious').src=previousIcon;
     document.getElementById('btnNext').src=previousIcon;
     document.getElementById('btnLast').src=firstIcon;
</script>